<template>
  <div style="margin-bottom: 10px">
    <Table :tableData="tableData" :tableColumn="tableColumn"
           border
           :headerStyle="{backgroundColor:'#fffbed'}"
           :page="page" @handleSizeChange="handleSizeChange"
           @handleCurrentChange="handleCurrentChange"></Table>
  </div>
</template>

<script>
import {rechargeInfo} from "@/api/order";

export default {
  props: ['routesQuery'],
  name: "phoneBillRecord",
  data() {
    return {
      tableData: [],
      tableColumn: [
        {label: this.$t('时间'), prop: 'paymentTime'},
        {label: this.$t('金额'), prop: 'amount'}
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const {userId} = this.routesQuery
      const res = await rechargeInfo({
        userId: parseInt(userId),
        ...this.page
      })
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page.total = total
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getList()
    }
  }
}
</script>

<style scoped>

</style>
